<template>
  <div>
    <div
      v-for="item in navList"
      :key="item.id"
      class="text-sm border-b border-gray-lightest"
      @click="classify(item.id)"
    >
      <h3 class="flow-root">
        <button
          @click="cur = item.id"
          id="headlessui-disclosure-button-37"
          type="button"
          :class="[
            'px-5 py-4 bg-white w-full flex items-center justify-between',
            { bgYellow: cur == item.id },
          ]"
          aria-expanded="false"
        >
          <span>{{ item.flname }}</span>
        </button>
      </h3>
    </div>
  </div>
</template>
<script>
export default {
  props: ["navList"],
  data() {
    return {
      cur: "",
    };
  },
  methods: {
    classify(val) {
      this.$emit("classify", val);
    },
  },
};
</script>
<style>
.bgYellow {
  background-color: lightyellow;
}
</style>
